<template>
<van-search
  shape="round"
  placeholder="请输入搜索关键词"
/>
<!-- 内容 -->
<van-tree-select
  v-model:main-active-index="activeIndex"
  height="auto"
  :items="items"
>
  <template #content>
   <div v-if="activeIndex === 0" class="shoplist" >
    <div v-for="shop in shopList" :key="shop" @click="handleclick(shop)" class="shopcontent" >
     <div class="imgbox">
      <img :src="shop.imgUrl" alt="">
      </div>
      <div>
       <span class="title">{{shop.title}}</span>
      </div>
    </div>
   </div>

   <div v-if="activeIndex === 1" class="shoplist">
    <div v-for="shop in shopList1" :key="shop" class="shopcontent">
     <div class="imgbox">
      <img :src="shop.imgUrl" alt="">
      </div>
      <div>
       <span class="title">{{shop.title}}</span>
      </div>
    </div>
   </div>

   <div v-if="activeIndex === 2" class="shoplist">
    <div v-for="shop in shopList" :key="shop" class="shopcontent">
     <div class="imgbox">
      <img :src="shop.imgUrl" alt="">
      </div>
      <div>
       <span class="title">{{shop.title}}</span>
      </div>
    </div>
   </div>
  </template>
</van-tree-select>
</template>

<script>
import { Search,TreeSelect} from 'vant';
import { ref,onMounted } from 'vue';
import {classifyApi} from '../utils/api';
import router from "../router/index"
export default {
setup(){
const activeIndex = ref(0);
// 获得数据
const items= ref([
  { text: '推荐分类'}, 
  { text: '全球奶粉' },
  {text: '尿不湿'},{text:'营养辅品'},{text: '喂养用品'},{text:'宝宝护洗'},{text: '清洁用品'},{text:'孕产母乳'},{text: '婴幼儿服饰'},{text:'宝宝出行'}
]);

const shopList=ref([]);
const shopList1=ref([]);
const shopList2=ref([]);
const getShop=async()=>{
  const res=await classifyApi({type:'1'});
   shopList.value=res.result;
  const world=await classifyApi({type:'2'});
    shopList1.value=world.result;
    const worlds=await classifyApi({type:'2'});
    shopList2.value=worlds.result;
};
// 点击跳转详情页
const handleclick=(val)=>{
  router.push({path:'/home/details',query:val})
}
onMounted(()=>{
  getShop();
});

return{
activeIndex,
items,
shopList,
shopList1,
shopList2,
handleclick
}


},
components:{
 "van-search":Search,
"van-tree-select":TreeSelect,
}
}
</script>

<style scoped>
.shoplist{
 height: 100%;
}
.shopcontent{
 float: left;
 width: 60px;
 height: 60px;
 margin: 20px 10px;
}
.imgbox>img{
 width: 100%;
 height: 100%;
}
.title{
 display: block;
 text-align: center;
 width:60px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}
</style>